<!--
@Description:商品2.0-橱柜列表
@Author:zqy
@Date:2021-11-27 10:45:00
@Last Modified by:zqy
@Last Modified time:2021-11-27 10:45:00
-->
<template>
  <List ref="list" class="cabinet" component-name="NavFilter" :finished.sync="finished" :reset-fun="resetData" :load="load" :refresh="load">
    <ShowWindow
      v-for="(l,i) in list"
      :key="i"
      :show="false"
      :src="l.appNewSeriesCoverImageUrl"
      :name="l.seriesName"
      :host="ADS_STATIC_PATH"
      @click.native.stop="clickHandle(l)"
    />
  </List>
</template>
<script>
import List from '@/components/List'
import ShowWindow from '../components/ShowWindow'
import { getProductPage, getCabinetAttribute } from '@/apis/productCenter2.0'
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'CabinetList',
  components: {
    List,
    ShowWindow
  },
  refresh: true,
  props: {
  },
  data() {
    return {
      ADS_STATIC_PATH: `${process.env.VUE_APP_ADS_STATIC}`,
      list: [],
      finished: false
    }
  },
  computed: {
    ...mapGetters('nav', ['filterData'])
  },
  watch: {
  },
  activated() {
    this.getFilterData(getCabinetAttribute)
  },
  created() {
    this.$on('refresh', this.resetPageData)
  },
  methods: {
    ...mapActions('nav', ['getFilterData']),
    ...mapMutations('nav', ['updateFilterData']),
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, pageSize) {
      const selectedData = this.$extrFilterData(this.filterData)
      const data = {
        page,
        rows: pageSize,
        styleId: this.$extrFIlterValueByFlag(selectedData, 'styleList')
      }
      return getProductPage(data).then(res => {
        this.list.push(...(res.data.records || []))
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    clickHandle(item) {
      this.$router.push({ name: 'CabinetDetail', params: { id: item.id }})
    }
  }
}
</script>
<style lang="less" scoped>
.cabinet{

}
</style>
